<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="待办事项" name="first"><ToDoFile /></el-tab-pane> -->
      <el-tab-pane name="first">
        <span slot="label"
          ><i class="el-icon-tickets"></i>{{ $t("labels.label1") }}</span
        >
        <ToDoFile />
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"
          ><i class="el-icon-date"></i>{{ $t("labels.label2") }}
        </span>
        <QRcode :url="QRcodeurl" :logo-url="QRlogoUrl" />
      </el-tab-pane>
      <el-tab-pane name="Third">
        <span slot="label"
          ><i class="el-icon-date"></i> {{ $t("labels.label3") }}</span
        >
        <groupSortDraggle />
      </el-tab-pane>
      <el-tab-pane name="Four">
        <span slot="label"
          ><i class="el-icon-date"></i>{{ $t("labels.label4") }}
        </span>
        <sortDraggle />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ToDoFile from '@/components/SmallComponents/ToDoFile.vue';
import QRcode from '@/components/SmallComponents/qrcode/QRcode.vue';
import groupSortDraggle from '../table/groupSortDraggle.vue';
import sortDraggle from '@/views/form/table/sortDraggle.vue'

export default {
  data () {
    return {
      activeName: 'first',
      // QRcodeurl: 'https://www.jb51.net/javascript/317758cmb.htm',
      QRcodeurl: ' http://192.168.2.125:8888/',
      QRlogoUrl: 'https://img0.baidu.com/it/u=4096841107,3844863894&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
    };
  },
  components: {
    ToDoFile,
    QRcode,
    groupSortDraggle,
    sortDraggle
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event);
    }
  }
};
</script>